<template>
    <div class="container">
        <h1>options</h1>
        <p>
            state___count1:
            <strong>{{ store1.count1 }}</strong>
        </p>
        <p>
            state___count2:
            <strong>{{ store1.count2 }}</strong>
        </p>
        <p>
            getter__count1+count2:
            <strong>{{ store1.doubleCount }}</strong>
        </p>
        <p>
            action:
            <span>
                <button @click="clickOptionAdd1">count1 + 1</button>
                <button @click="clickOptionAdd2">count2 + 2</button>
                <button @click="clickOptionPatch">$patch 10_20</button>
                <button @click="clickOptionReset">$reset</button>
            </span>
        </p>
    </div>
</template>

<script setup lang="ts">
import { useStore1 } from "../store/index";

const store1 = useStore1();
const emits = defineEmits(["clickButton"])

const clickOptionAdd1 = () => store1.count1Add();

const clickOptionAdd2 = () => {
    const { count2Add } = store1;
    count2Add(2);
}

const clickOptionPatch = () => {
    store1.$patch({
        count1: 10,
        count2: 20,
    })
}

const clickOptionReset = () => store1.$reset();

store1.$subscribe((id: string, state: Record<string, any>) => {
    emits("clickButton", `${id} $subscribe state=${JSON.stringify(state)}`)
})

store1.$onAction((options: Record<"after" | "onError", Function>) => {
    options.after(() => {
        emits("clickButton", "store1 $onAction after")
    })
    emits("clickButton", "store1 $onAction before")
})
</script>